import React,{Component} from 'react';

class Picker extends Component {
    constructor(props){
        super(props)
        this.delay=200
        this.state={
            animateActive:false
        }
    }

    itemClick(e,val,label,e2){
        // e dom event   e2 dom proxy
        // console.log(e,val,e2)
        e2.stopPropagation();
        if (this.props.onMaskClick){
            this.setState({
                animateActive:false
            })
            setTimeout(()=>{
                this.props.onChange(val,label)
            },this.delay)
        }
    }

    maskClick(e){
        e.stopPropagation();
        if (this.props.onMaskClick){
            this.setState({
                animateActive:false
            })
            setTimeout(()=>{
                this.props.onMaskClick();
            },this.delay)
        }
    }

    render(){

        if (this.props.show){
            let items = this.props.groups.map((item)=>{
                return <a href="javascript:;" key={Math.random().toString(16).substring(2)} onClick={this.itemClick.bind(this,event,item.value,item.label)}>{item.label}</a>
            });
            return (
                <div className={`com-picker-mask ${this.props.show?'ani':''} ${this.state.animateActive?'ani-active':''}`} onClick={this.maskClick.bind(this)}>
                    <div className={`com-picker ${this.props.show?'ani':''} ${this.state.animateActive?'ani-active':''}`}>
                        <a href="javascript:;">请选择</a>
                        {items}
                    </div>
                </div>
            )
        }
        else{
            return null
        }
    }

    componentWillReceiveProps(nextProps)
    {
        if (this.props.show===false && nextProps.show===true){
            setTimeout(()=>{
                this.setState({
                    animateActive:true
                })
            },0)
        }
    }
}

export default Picker